<template>
  <div class="overview-left">
    <div class="overview-l1">
      <category-title export title="智能管控" title-sub="intelligent control"/>
      <div class="icon-List">
        <IconGroup v-for="(item,index) in leftItem" :key="index" :data="l1data[item.key] || 0" :img="item.img"
                   :textColor="item.color" :title="item.title"
        ></IconGroup>
      </div>
    </div>
    <div class="overview-l2">
      <category-title export title="车辆出入记录" title-sub="Vehicle Record"/>
      <div class="table-box">
        <simple-table :columns="l2ColumnData" :datas="l2data" @next-page="l2ScrollEvent"/>
      </div>
    </div>
  </div>
  <div class="overview-middle">
    <div class="middle-tag">
      <MiddleGroup :col="middleItem" :datas="middleData"></MiddleGroup>
    </div>
  </div>
  <div class="overview-right">
    <div class="overview-r1">
      <category-title title="车流统计" title-sub="Traffic flow statistics"/>
<!--      <CategoryInfo :col="R1Info" :datas="carChart"></CategoryInfo>-->
<!--      <div ref="R1Chart" class="chart"/>-->
      <TrafficStream></TrafficStream>
    </div>
    <div class="overview-r2">
      <category-title title="人流统计" title-sub="Personnel flow statistics"/>
      <CategoryInfo :col="R2Info" :datas="peopleChart"></CategoryInfo>
      <div ref="R2Chart" class="chart"/>
    </div>
    <div class="overview-r3">
      <category-title title="边界告警" title-sub="Boundary alarm"/>
      <div class="table-box">
<!--        <simple-table :columns="r3ColumnData" :datas="r3Data"/>-->
        <Bjgj/>

      </div>
    </div>
    <preview v-if="showPreview" :url="previewUrl" @close="showPreview = false"/>
    <DialogCamera v-if="showCamera" :url="CameraUrl" @close="showCamera = false"/>
  </div>
</template>

<script setup>
import {onBeforeUnmount, onMounted, ref} from "vue";
import {handleChart, l2ColumnData, leftItem, middleItem, R1Info, R2Info, r3ColumnData} from "./data.js";
import IconGroup from "./component/icon-group/index.vue";
import {createChartR1} from "./chart-r1.js";
import DialogCamera from "@/components/customs/dialog-camera/index.vue";
import SimpleTable from "@/components/customs/simple-table/index.vue";
import CategoryTitle from "@/components/customs/category-title/index.vue";
import Preview from "@/components/customs/preview/index.vue";
import {inject, reactive} from "@vue/runtime-core";
import MiddleGroup from "./component/middle-group/index.vue";
import CategoryInfo from "@/components/customs/category-info/index";
import {BjgjApi, CarChartApi, CarRecord, OverviewL1, OverviewMiddle, PeopleChartApi} from "@/common/customs/overview";
import {createChartR2} from "@/pages/overview/chart-r2";
import TrafficStream from "@/components/customs/traffic-stream/index.vue";
import {nextPageFun, scrollNextEvent} from "@/common/tool";
import {L2Info} from "@/pages/security/chart-l2";
import Bjgj from "@/components/customs/Bjgj/index.vue";

// const R1Chart = ref(null);
const R2Chart = ref(null);
const time = ref(null);
const showPreview = ref(false);
const showCamera = ref(false);
const previewUrl = ref("");
const CameraUrl = ref("");
const l1data = ref({});
const l2data = ref([]);
const L2Config = reactive({
  total: 0,
  isEnd: false,
  loading: false,
  params: {
    page: 1,
    page_size: 50
  }
});
const r3Data = ref([]);
const middleData = ref({});
const carChart = reactive({
  chartData: [],
  drcll: 0,
  dccls: 0
});
const peopleChart = reactive({
  chartData: [],
  dqrll: 0,
  dqygs: 0
});
const isLoading = inject("isLoading");

const getMiddle = async () => {
  const api = new OverviewMiddle();
  await api.send();
  const {data} = await api.getDatas();
  middleData.value = data;
};
const getL1 = async () => {
  const res = new OverviewL1();
  await res.send();
  const {data} = await res.getDatas();
  l1data.value = data;
};
const getL2 = async (next = false) => {
  const res = new CarRecord();
  const dataBase = (data) =>{
    data.data = data.data.map(item => {
      item.vehicleOut = ["进", "出"][item.vehicleOut];
      return item;
    });
    return data
  }
  await nextPageFun(res, l2data, next, L2Config, dataBase);
  // res.params({
  //   page: 1,
  //   page_size: 50
  // });
  // await res.send();
  // const {data} = await res.getDatas();
  // l2data.value = data.data.map(item => {
  //   item.vehicleOut = ["进", "出"][item.vehicleOut];
  //   return item;
  // });
};
const getR1 =async () => {
  const api = new BjgjApi();
  api.params({
    page:1,
    page_size: 50
  })
  await api.send()
  const {data} = await api.getDatas()
  r3Data.value = data.data
};
const getCarChart = async () => {
  const api = new CarChartApi();
  await api.send();
  const {data, xw, drcll, dccls} = await api.getDatas();
  carChart.dccls = dccls;
  carChart.drcll = drcll;
  let arr = handleChart({data, xw}, ["登记车辆", "临时车辆"]);
  carChart.chartData = arr;
  createChartR1(R1Chart.value, carChart.chartData);
};
const getPeopleChart = async () => {
  const api = new PeopleChartApi();
  await api.send();
  const {data, xw, dqygs, dqrll} = await api.getDatas();
  peopleChart.dqrll = dqrll;
  peopleChart.dqygs = dqygs;
  peopleChart.chartData = handleChart({data, xw}, ["员工人流量", "访客人流量"]);
  createChartR2(R2Chart.value, peopleChart.chartData);
};
const l2ScrollEvent = (event) => {
  sx()
  scrollNextEvent(event, L2Config,() => getL2(true));
};
const sx = () => {
  if (time.value){
    clearInterval(time.value)
  }
  time.value = setInterval(()=>{
    getL2(false);
    getR1();
    // getCarChart();
    getPeopleChart();
  },60000)
}
onMounted(() => {
  getMiddle();
  getL1();
  getL2(false);
  getR1();
  // getCarChart();
  getPeopleChart();
  sx()
});

onBeforeUnmount(()=>{
  if (time.value){
    clearInterval(time.value)
  }
})
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
